<template>
    <div>
         <el-row>
            <el-col :span="2">列表类型：</el-col>
            <el-col :span="6">服务周期到期卡号列表</el-col>
            <el-col :span="2">卡号总数：</el-col>
            <el-col :span="6">3</el-col>
            <el-col :span="2">更新时间：</el-col>
            <el-col :span="6">2018-07-01 02:00:12</el-col>
        </el-row>
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="mt_5">
                        <el-input v-model="formInline.user" placeholder="ICCID或者设备名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary">导出</el-button>
                    <el-button type="primary" @click="dialogVisible = true">物联卡筛选</el-button>
                </el-form>
                <el-dialog title="物联卡筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="卡状态：">
                            <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="运营商类型：">
                            <el-select v-model="ruleForm.type" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="服务周期结束日：" class="w100">
                            <div class="block">
                                <el-date-picker
                                    v-model="ruleForm.value2"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="float-right">
                <el-popover placement="bottom" trigger="hover" title="筛选条件">
                    <el-menu>
                        <el-menu-item index="1">
                            <el-checkbox v-model="checked1">电话号码</el-checkbox>
                        </el-menu-item>
                    </el-menu>
                    <span slot="reference">
                        <el-button type="primary">
                            <i class="iconfont icon-loudou"></i>
                        </el-button>
                    </span>
                </el-popover>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" label="id" width="40" prop="id">
            </el-table-column>
            <el-table-column label="ICCID" prop="iccid" sortable width="200">
            </el-table-column>
            <el-table-column prop="phone" label="电话号码" width="150" v-if="checked1">
            </el-table-column>
            <el-table-column prop="status" label="卡状态" sortable  width="100">
            </el-table-column>
            <el-table-column prop="carrier" label="运营商" sortable  width="100">
            </el-table-column>
            <el-table-column
                label="服务周期起始日"
                width="200"
                >
                <template slot-scope="scope">
                    {{ scope.row.start_time}}
                </template>
            </el-table-column>
            <el-table-column
                label="服务周期结束日"
                width="200"
                sortable
                >
                <template slot-scope="scope">
                    {{ scope.row.end_time}}
                </template>
            </el-table-column>
            <el-table-column prop="product" label="套餐产品" width="150">
            </el-table-column>
            <el-table-column prop="product_price" label="套餐价格">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    value1: '',
                    type: '',
                    value2: ''
                },
                formInline: {
                    user: ''
                },
                option1: [
                    {
                        value: '选项1',
                        label: '库存'
                    },
                    {
                        value: '选项2',
                        label: '可测试'
                    }
                ],
                option2: [
                    {
                        value: '选项1',
                        label: '联通'
                    },
                    {
                        value: '选项2',
                        label: '电信'
                    }
                ],
                dialogVisible: false,
                checked1: false,
                tableData: [
                    {
                        iccid: '8986031630200232555',
                        phone: '17798870257',
                        status:'已激活',
                        carrier: '上海电信',
                        start_time: '2018-06-25 11:05:13',
                        end_time: '2018-07-31 23:59:59',
                        product: '叠加包测试套餐',
                        product_price: '0.02'
                    }
                ]
            }
         }
    }
</script>

<style scoped lang="scss">
    .w100, .el-date-editor {
        width: 100%;
    }
    .el-row {
        .el-col {
            font-size: 14px;
            padding: 15px 0px;
        }
        .el-col:nth-of-type(2n + 1) {
            font-weight: bold;
            text-align: left;
        }
        .el-col:nth-of-type(2n) {
            padding-left: 15px;
        }
    }
</style>